<div layout="row" layout-wrap>
    <div flex-xs="100" flex-sm="100" flex-gt-sm="50">
        <md-card>
            <md-card-header>
                <md-card-header-text ng-click="toRecentSignup()">
                    <span class="md-headline" translate style="cursor: pointer;">最新注册用户</span>
                </md-card-header-text>
            </md-card-header>
            <md-card-content>
                <md-list>
                    <md-divider></md-divider>
                    <md-list-item ng-repeat="user in signupUsers" ng-click="toUser(user.id)">
                        <div flex layout="row" layout-align="space-between center">
                            <div style="word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
                                flex="70" flex-xs="60">{{ user.username }}</div>
                            <div flex="30" flex-xs="40" style="text-align: right; color: #aaa; font-size: 0.8em;"
                                ng-if="user.createTime">{{user.createTime | timeagoshort | translateTime}}</div>
                        </div>
                        <md-divider></md-divider>
                    </md-list-item>
                    <md-list-item ng-if="!signupUsers.length">
                        <div flex layout="row" layout-align="space-between center">
                            <div translate>无</div>
                        </div>
                        <md-divider></md-divider>
                    </md-list-item>
                </md-list>
            </md-card-content>
        </md-card>
    </div>
    <div flex-xs="100" flex-sm="100" flex-gt-sm="50">
        <md-card>
            <md-card-header>
                <md-card-header-text ng-click="toRecentLogin()">
                    <span class="md-headline" translate style="cursor: pointer;">最近登录用户</span>
                </md-card-header-text>
            </md-card-header>
            <md-card-content>
                <md-list>
                    <md-divider></md-divider>
                    <md-list-item ng-repeat="user in loginUsers" ng-click="toUser(user.id)">
                        <div flex layout="row" layout-align="space-between center">
                            <div style="word-break: keep-all; white-space:nowrap; overflow: hidden; text-overflow: ellipsis;"
                                flex="70" flex-xs="60">{{user.username}}</div>
                            <div flex="30" flex-xs="40" style="text-align: right; color: #aaa; font-size: 0.8em;"
                                ng-if="user.lastLogin">{{user.lastLogin | timeagoshort | translateTime}}</div>
                        </div>
                        <md-divider></md-divider>
                    </md-list-item>
                    <md-list-item ng-if="!loginUsers.length">
                        <div flex layout="row" layout-align="space-between center">
                            <div translate>无</div>
                        </div>
                        <md-divider></md-divider>
                    </md-list-item>
                </md-list>
            </md-card-content>
        </md-card>
    </div>
    <div flex-xs="100" flex-sm="100" flex-gt-sm="50" ng-show="orders.length">
        <md-card>
            <md-card-header>
                <md-card-header-text ng-click="toPay('支付宝')">
                    <span class="md-headline" translate style="cursor: pointer;">支付宝订单</span>
                </md-card-header-text>
            </md-card-header>
            <md-card-content>
                <md-list>
                    <md-divider></md-divider>
                    <md-list-item ng-repeat="order in orders">
                        <div flex layout="row" layout-align="space-between center" ng-click="showOrderInfo(order)">
                            <div flex="30" flex-xs="60">
                                <span style="font-size: 0.9em;">{{ order.orderId }}</span><br><span
                                    style="font-size: 0.9em;">{{ order.createTime | timeago }}</span>
                            </div>
                            <div flex="30" flex-xs="40" style="text-align: right;">
                                <span style="font-size: 0.9em; color: #555">{{order.amount}}</span><br><span
                                    style="font-size: 0.9em; color: #000">{{ order.status | order | translate }}</span>
                            </div>
                        </div>
                        <md-divider></md-divider>
                    </md-list-item>
                </md-list>
            </md-card-content>
        </md-card>
    </div>
    <div flex-xs="100" flex-sm="100" flex-gt-sm="50" ng-show="paypalOrders.length">
        <md-card>
            <md-card-header>
                <md-card-header-text ng-click="toPay('Paypal')">
                    <span class="md-headline" translate style="cursor: pointer;">PayPal订单</span>
                </md-card-header-text>
            </md-card-header>
            <md-card-content>
                <md-list>
                    <md-divider></md-divider>
                    <md-list-item ng-repeat="order in paypalOrders">
                        <div flex layout="row" layout-align="space-between center" ng-click="showOrderInfo(order)">
                            <div flex="30" flex-xs="60">
                                <span style="font-size: 0.9em;">{{ order.orderId }}</span><br><span
                                    style="font-size: 0.9em;">{{ order.createTime | timeago }}</span>
                            </div>
                            <div flex="30" flex-xs="40" style="text-align: right;">
                                <span style="font-size: 0.9em; color: #555">{{order.amount}}</span><br><span
                                    style="font-size: 0.9em; color: #000">{{ order.status | order | translate }}</span>
                            </div>
                        </div>
                        <md-divider></md-divider>
                    </md-list-item>
                </md-list>
            </md-card-content>
        </md-card>
    </div>
    <div flex-xs="100" flex-sm="100" flex-gt-sm="50" ng-show="topFlow.length">
        <md-card>
            <md-card-header>
                <md-card-header-text ng-click="toTopFlow()">
                    <span class="md-headline" translate style="cursor: pointer;">今日流量排行</span>
                </md-card-header-text>
            </md-card-header>
            <md-card-content>
                <md-list>
                    <md-divider></md-divider>
                    <md-list-item ng-repeat="tf in topFlow">
                        <div flex layout="row" layout-align="space-between center" ng-click="toTopUser(tf)">
                            <div flex="70" flex-xs="60" style="overflow: hidden; text-overflow: ellipsis;">
                                <span>{{ tf.email || tf.port }}</span>
                            </div>
                            <div flex="30" flex-xs="40" style="text-align: right;">
                                <span style="color: #555">{{ tf.sumFlow | flow }}</span>
                            </div>
                        </div>
                        <md-divider></md-divider>
                    </md-list-item>
                </md-list>
            </md-card-content>
        </md-card>
    </div>
</div>